<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title></title>
		<script type="text/javascript" src="../../js/selfjs/echarts.min.js"></script>
		<link rel="stylesheet" href="../../js/layui/layui/css/layui.css" media="all" />		
		<link rel="stylesheet" href="../../js/selfcss/main.css" />
		<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/bootstrap/easyui.css">
		<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../../js/selfcss/demo.css">
		<script type="text/javascript" src="../../js/easyui/jquery.min.js"></script>	
		<script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script> 
	</head>

	<body>
		<div class="layui-field-box" style="width:90%;height:30px;" id="button1">
    		 <a href="javascript:history.go(-1)" class="easyui-linkbutton" data-options="toggle:true" >返回</a>	
  		 </div> 
		<fieldset class="layui-elem-field">
		 <div class="layui-field-box" style="width:90%;height:200px;" id="cpu">
    			
  		 </div>
  		 <div class="layui-field-box" style="width:90%;height:200px;" id="memory">
    			
  		 </div>
  		 <div class="layui-field-box" style="width:90%;height:200px;" id="keyhit">
    			
  		 </div>
  		 <div class="layui-field-box" style="width:90%;height:200px;" id="connectedclients">
    			
  		 </div>
  		 <div class="layui-field-box" style="width:90%;height:200px;" id="commands">
    			
  		 </div>
		</fieldset>
		
  		<script type="text/javascript">
  		var applicationId;
        var cpuChart = echarts.init(document.getElementById('cpu'));
        var memoryChart = echarts.init(document.getElementById('memory'));
        var keyhitChart = echarts.init(document.getElementById('keyhit'));
        var connectedclientsChart = echarts.init(document.getElementById('connectedclients'));
        var commandsChart=echarts.init(document.getElementById('commands'))
        // 使用刚指定的配置项和数据显示图表。
		function setData(){
        	 	if(applicationId){
        	 		var url="../../"+applicationId+"/searchRedisSlaveImageData";
        	 		$.getJSON(url, function (data) {  
    		            if (data) {  
    		            	cpuChart.setOption(data.usedCPUOption,true);
    		            	memoryChart.setOption(data.usedMemoryption,true); 
    		            	keyhitChart.setOption(data.keyHitOption,true);  
    		            	connectedclientsChart.setOption(data.clientConnectionOption,true);
    		            	commandsChart.setOption(data.totalCommandOption,true); 
    		            	
    		            	
    		            } 
    		        });
        	 	}
				

			}
			window.onload=function(){
				applicationId=getUrlParam("id");
				
				
				setInterval(setData,5000);
			}
			
			function getUrlParam(name) {
	            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
	            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
	            if (r != null) return unescape(r[2]); return null; //返回参数值
	        }
		</script>	
	</body>
	
</html>